import { Image } from '@arco-design/web-react';
import { IconClose, IconImageClose, IconUpload,IconEye } from '@arco-design/web-react/icon';
import { useState } from 'react';
import OssUploadDialog from './ossUploadDialog';
import { isString } from '../utils/utils';

interface Props {
  onChange?: (list: (string | File)[]) => void;
  limit?: number;
  width?: number;
  autoUpload?: boolean;
  onlyReturnUrl?: boolean;
  onlyReturnId?: boolean;
  onlyReturnFile?: boolean;
  toAliyun?: boolean;
  values?: (string | File)[];
  fileSize?: number;
  disabled?: boolean;
  title?: string;
}
export default function UploadImg({
  limit = 1,
  values,
  width = 50,
  autoUpload = true,
  onlyReturnUrl = false,
  onlyReturnId = false,
  onlyReturnFile = false,
  toAliyun = false,
  fileSize,
  onChange,
  disabled,
  title,
}: Props) {
  let pics = values ?? [];
  const [dialogShow, setDialogShow] = useState(false);
  function handleConfirm(v: string[] | File[]) {
    setDialogShow(false);
    if (disabled) return;
    if (onChange) {
      onChange([...(values ?? []), ...v]);
    }
  }
  const [visible, setVisible] = useState('');
  function handleRemove(idx: number) {
    if (disabled) return;
    let _values = [...pics];
    _values.splice(idx, 1);
    onChange && onChange(_values);
  }
  //  x-oss-process=image/resize,m_fixed,h_60,w_60,quality,Q_50
  return (
    <div className="d-flex-r common-upload-img">
      {pics.map((i, idx) => {
        let url = '';
        if (isString(i)) {
          url = i as string;
          if (url.includes('?')) {
            url += '&';
          } else {
            url += '?';
          }
          url += 'x-oss-process=image/resize,m_fixed,h_60,w_60,quality,Q_50';
        } else {
          let windowUrl = window.URL || window.webkitURL;
          url = windowUrl.createObjectURL(i as File);
        }

        return (
          <Image
            key={url + idx}
            className="mr-5 mb-5"
            actions={disabled ? [] : [<IconClose onClick={() => handleRemove(idx)} />]}
            src={url}
            width={width}
            
            height={width}
            previewProps={{
              src: url.includes('?') ? url.split('?')[0] : url,
            }}
            error={
              <div className="arco-image-with-footer-inner arco-image-with-preview">
                <IconImageClose className="arco-image-error-icon" />
                <div className="arco-image-footer arco-image-footer-with-actions">
                  <div className="arco-image-footer-block arco-image-actions">
                    <div className="arco-image-actions-list">
                      <div className="arco-image-actions-item">
                        <IconClose onClick={() => handleRemove(idx)} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            }
          />
        );
      })}
      {pics.length < limit && !disabled && (
        <div
          className="upload-btn cursor-pointer mb-5"
          onClick={() => setDialogShow(true)}
          style={{ width: `${width}px`, height: `${width}px`, lineHeight: `${width}px` }}
        >
          <IconUpload />
        </div>
      )}
      <Image.Preview
        src={visible}
        visible={visible?true:false}
        onVisibleChange={()=>setVisible('')}
      />
      <OssUploadDialog
        title={title}
        accept=".jpg,.png,.jpeg"
        autoUpload={autoUpload}
        limit={limit - pics.length}
        show={dialogShow}
        onlyReturnUrl={onlyReturnUrl}
        onlyReturnId={onlyReturnId}
        onlyReturnFile={onlyReturnFile}
        toAliyun={toAliyun}
        fileSize={fileSize}
        onCancel={() => setDialogShow(false)}
        onConfirm={handleConfirm}
        otherChild={fileSize && <span>文件不能超过{fileSize}M</span>}
      />
    </div>
  );
}
